<script setup>

import CardBox from "@/components/CardBox/index.vue";
import {useRouter} from "vue-router";
import {Download} from "@element-plus/icons-vue";
import {deleteAuditApi, listAuditApi} from "@/api/school.js";
import {formatDate, formatTypeName} from "@/utils/index.js";
const {proxy} = getCurrentInstance();

const router = useRouter()

const showDia1 = ref(false)
const state = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  tableData: [],
  total: 0,
})
const handleAdd = () => {
}

const handleUploadSuccess = (response, file, fileList) => {
  console.log(response, file, fileList)
}

const handleEdit = (id) => {
  router.push('approvalManagement/captainApproval/details?id=' + id)
}

// 申请
const handleBind = () => {
  router.push('approvalManagement/mineApproval/add')
}

const handleMine = () => {
  router.push('teacherApproval/myStudents')
}

const getDataList = async () => {
  const res = await listAuditApi(state.queryParams)
  if (res.code == 200) {
    state.tableData = res.rows
    state.total = res.total
  }
}

const handleRemove = (id) => {
  proxy.$modal.confirm('是否删除该数据？').then(async () => {
    const res = await deleteAuditApi({id})
    if (res.code == 200) {
      proxy.$modal.msgSuccess("删除成功")
    }
    await getDataList()
  })
}

const handleExport = () => {
  proxy.download("school/audit/myExport", {
    ...state.queryParams
  },`审批记录.xlsx`);
}

onMounted(() => {
  getDataList()
})

</script>

<template>
  <div class="outBox">
    <CardBox title="我的申请">
      <template #btn-cont>
        <el-button type="primary" @click="handleExport">
          <el-icon>
            <Download/>
          </el-icon>
          <span>导出</span>
        </el-button>
        <el-button type="primary" @click="handleBind">申请</el-button>
      </template>
      <template #content>
        <el-table :data="state.tableData" style="width: 100%">
          <el-table-column label="序号" type="index" width="50" align="center"/>
          <el-table-column prop="auditStatus" label="审批状态" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.auditStatus == 1" type="info">待审核</el-tag>
              <el-tag v-if="scope.row.auditStatus == 2" type="success">通过</el-tag>
              <el-tag v-if="scope.row.auditStatus == 3" type="danger">未通过</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="auditType" label="审批类别" align="center">
            <template #default="scope">
              {{formatTypeName(scope.row.auditType)}}
            </template>
          </el-table-column>
          <el-table-column prop="auditUser" label="审核人" align="center"/>
          <el-table-column prop="createTime" label="申请时间" align="center">
            <template #default="scope">
              {{ formatDate(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="审核时间" align="center">
            <template #default="scope">
              {{ formatDate(scope.row.updateTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" link @click="handleEdit(scope.row.id)">查看详情</el-button>
              <el-button type="danger" size="small" link @click="handleRemove(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pageBox">
          <pagination
              v-show="state.total > 0"
              :total="state.total"
              v-model:page="state.queryParams.pageNum"
              v-model:limit="state.queryParams.pageSize"
              @pagination="getDataList()"/>
        </div>
      </template>
    </CardBox>
  </div>
</template>

<style scoped lang="scss">

</style>
